<div>
  <ui-section id="gitlabSettings">
    <div class="header" v-text="$t('settings')"></div>
    <
    <ui-prop :name="$t('endPoint')" @change="onPropChange" type="string" data-key="endpoint" :value="gitlab.endpoint"></ui-prop>
    <ui-prop :name="$t('privateToken')" @change="onPropChange" type="string" data-key="privateToken" :value="gitlab.privateToken"></ui-prop>
    <ui-prop :name="$t('apiVersion')" @change="onPropChange" type="string" data-key="apiVer" :value="gitlab.apiVer"></ui-prop>
    <ui-prop :name="$t('namespaceId')" @change="onPropChange" type="string" data-key="nsId" :value="gitlab.nsId"></ui-prop>
    <ui-prop :name="$t('namespaceName')" @change="onPropChange" type="string" data-key="ns" :value="gitlab.ns"></ui-prop>
    <ui-prop :name="$t('moduleDirectory')" @change="onPropChange" type="string" data-key="moduleDirectory" :value="gitlab.moduleDirectory"></ui-prop>
    <ui-prop :name="$t('prefixes')" @change="onPropChange" type="string" data-key="prefixes" :value="gitlab.prefixes"></ui-prop>
    <ui-button @confirm="saveSettings">
      {{$t('save')}}
      <i class="icon-ok" v-if="settingsSaved"></i>
    </ui-button>
    <ul style="margin:0;padding:0;" v-html="$t('explanation')">
      
    </ul>
  </ui-section>

  <ui-section id="comps-utils">
    <div class="header" v-text="$t('availableModules')"></div>
    <span v-if="!hasSettings()">{{$t('fillGitlabSettings')}}</span>
    <div class="layout horizontal">
      <ui-button @confirm="refresh">
        <i class="icon-refresh"></i>
        {{$t('refreshList')}}
      </ui-button>
      <ui-button @confirm="refreshAssets">
        <i class="icon-refresh"></i>
        {{$t('refreshAssets')}}
      </ui-button>
    </div>
    <div class="error" style="color:red">{{errorMsg}}</div>
    <ui-input placeholder="search" v-value="search" style="margin-top: 4px" @dblclick="search=''"></ui-input>
    <ui-button @confirm="toggleFoldAll()">
      <i class="icon-refresh"></i>
      {{$t('toggleFoldAll')}}
    </ui-button>
    <ui-section v-for="(group, items) in groupedItems">
      <div class="header" v-text="group"></div>
      <ul class="comp-list" v-if="items.length > 0">
        <li class="comp-item layout horizontal" v-for="it in items" :data-id="it.id" style="margin-bottom: 2px;" v-show="!search || it.name.indexOf(search) >= 0">
          <a class="box" href="javascript:;" data-tag="master" :data-id="it.id" @click="download($event, it.id, it.name);search='';">
            <i class="icon-list-add"></i>
          </a>
          <ui-select :id="`project-tags-${it.id}`" class="box" class="tiny"
            style="background-color: transparent;border-radius:2px;width:6em;"
            v-if="tags[it.id]"
            @confirm="onTagChanged($event, it)">
            <option
              v-for="tag in tags[it.id]"
              :value="tag.name">{{tag.name}}
            </option>
          </ui-select>
          <span class="box name" :title="it.id">
            <a :href="it.url" style="color:#bdbdbd">{{it.name}}</a>
            <ui-hint class="box desc">{{it.desc}}</ui-hint>
          </span>
        </li>
      </ul>
    </ui-section>
  </ul-section>
</div>